<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
  <!-- 导入分页器插件的css文件 -->
  <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">
  <style>
    .breadcrumb{
      padding-left: 6px;
      padding-right: 6px;
    }

    .box{
      width: 800px;
      margin: 30px auto;
    }

    /* 独立定义自己需要的class */
    .m-style .prev{
      border: 1px solid #000;
      background: cyan;
      color: black;
    }

    .m-style .next{
      border: 1px solid #000;
      background: cyan;
      color: black;
    }

    .m-style .active{
      background: pink;
    }

  </style>
</head>
<body>
  <h1>我是一个列表页面</h1>

  <div class="pagi"></div>

  <!-- 分页显示应该写在页面的下方 为了看着方便定义在页面的上方 -->
 

  <div class="container">
    <ul></ul>
  </div>
  <div class="box m-style"></div>
  <script src="../tools/jquery.min.js"></script>
  <script src="../tools/jquery-pagination/jquery.pagination.js"></script>
  <script src="../js/tools.js"></script>
  <script src="../js/ajax.js"></script>
  <script>
    // 1, 获取 浏览器地址栏数据
    const urlObj1 = getUrlObj();
    console.log( urlObj1 );

    // 2, 设定 显示页数 和 每页显示数据数量
    let page = 1 ;
    let line = 8 ;

    // 调用函数 动态渲染生成页面
    setPage();

    // 定义函数 发送 ajax请求
    // 获取 一级分类 对应的数据 动态生成页面
    async function setPage(){
      // 2, 根据 一级分类名称 向PHP文件 发送请求
      const res = await myPromiseAjax( '../server/goods_list_two.php' , 'get' , {cat_two_id:urlObj1.cat_two_id , line:line , page:page} , 'json' );                   
      console.log( res );

      // 3, 动态生成页面
      // res.data 中 存储的数组的数据 生成页面内容
      let str = '';
      // item 就是 数组中 存储 数据的对象单元
      res.data.forEach(function(item){
        // 每次写入的是li标签对象
        str += `
          <li class="list-item">
            <div class="panel panel-primary">
              <div class="panel-body">
                <ol class="breadcrumb">
                  <li><a href="#">${item.cat_one_id}</a></li>
                  <li><a href="#">${item.cat_two_id}</a></li>
                  <li class="active">${item.cat_three_id}</li>
                </ol>
              </div>
              <div class="panel-footer">
                <div class="row">
                  <div class="">
                    <div class="thumbnail">
                      <img src="${item.goods_big_logo}" alt="...">
                      <div class="caption">
                        <h3>${item.goods_name}</h3>
                        <p>
                          <i class="glyphicon glyphicon-yen"></i>
                          <span>${item.goods_price}</span>
                        </p>
                        <p>
                          <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                          <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
    
        `;
      })
      // 将 字符串 写入 页面
      $('.container ul').html(str);
      
      // 分页器插件设定功能
      // 以对象的形式设定 分页器插件的数据
      $('.box').pagination({
        pageCount: res.sumPage ,          // 总页数
        totalData: res.row ,              // 数据总数量
        current: res.page ,               // 当前第几页
        showData: res.line ,              // 每页显示的数据数量
        prevCls: 'prev' ,                 // 上一页的class
        nextCls: 'next' ,                 // 下一页的class
        prevContent:'上一页',             // 上一页的文本内容
        nextContent:'下一页',             // 下一页的文本内容
        activeCls:'active',               // 选中状态class类名
        count: 4 ,                        // 选中页 前后显示的按钮数量 设定4 一共显示 5个按钮
        mode: 'fixed',                    // 按钮数量固定
        coping : true,                    // 开启 首页 末页
        homePage: '首页',                 // 首页按钮 文本内容         
        endPage: '末页',                  // 末页按钮 文本内容 
        isHide:true,                      // 总页数为 0 或者 1 时 隐藏分页插件  
        jump:true,                        // 开启 跳转页设定
        callback:function( p ){           // 触发 分页器 也就是 点击分页器按钮时 执行的函数程序
          // 定义一个 形参 插件 自动向这个形参存储数据
          console.log( p );
          // 其中 getCurrent() 是 获取当期页数
          // 将 获取的页数 赋值给 变量储存
          page = p.getCurrent();

          // 根据 新的页数 再次发起请求 动态生成页面
          setPage();

          // 当 点击 分页器插件时
          // 获取 点击的按钮 对应的 页数 将 页数的数值 赋值给 page变量储存
          // 再次发起请求 也就是 再次调用这个函数

        }   
      });
    }

  </script>



  <script>
    /*
      1,  获取 浏览器地址栏的数据
        根据数据 向 server/goods_list.php 发送请求
        请求方式 get
        携带 3个参数 键名是 cat_one_id  page line
          cat_one_id  一级分类名称  
                      浏览器地址栏传参

          page        当前显示的页数 也就是 第几页的数据
                      默认显示 第一页 的内容 初始值是 1

          line        每页显示的数据数量
                      根据实际项目需求设定 目前我们设定8

        响应体格式是 json字符串
        响应结果 说明
          data: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
            其中存储数组 每一个数组单元 对应一个 页面内容

          line: "8"
            每页显示的数据数量

          page: "1"
            当期页数

          row: "40"
            数据中数量

          sumPage: 5
            总页数

      2,  


      3,  点击 查看商品详情 按钮 
        跳转 商品的详情页 
        携带 当前商品 goods_id 数据
        动态生成页面时 给 超链接href属性中 设定参数
    
    
    */
  </script>
</body>
</html>